<template>
  <view>

    <view class="info-body">
            <view class="name-body">
                    <view class="name-info">
                        <view>姓氏: <text>{{content[0]}}</text></view>
                        <view class="sex">性别: <text>{{content[1] === "0" ? "男" :"女"}}</text></view>
                    </view>
                    <view class="name">
                        {{content[0]}}
                    </view>
            </view>

            <view class="brh-date">
                    出生日期: <text>{{content[2]}}</text>
            </view>
    </view>

    <view class="info-content">
        <view class="recommend" v-for="(item,index) in names" :key="item">
                <view class="name-fraction">
                    <view class="name-text" v-for="items in splitItem(item)">{{items}}</view>
                   
                    <view class="fraction">{{fs[index].replace("分","")}}<text>分</text></view>
                </view>
                <view class="name-moral">
                    姓名寓意：{{infos[index].split("。")[1].replace("这种组合的","")}}
                </view>
        </view>
        <view class="recommend-info">
            姓名匹配度: <text>{{pf[0]}}%</text>
        </view>
        <view class="recommend-info">
            寓意指数: <text>{{pf[1]}}%</text>
        </view>
        <view class="recommend-info">
            字形设计: <text>{{pf[2]}}%</text>
        </view>
        <view class="moral">{{
            infos[2].split("。")[1]}}</view>

    </view>


    <view class="commit age" @click="cv"></view> 

    <view class="commit copy"  @click="reCommit"></view> 
  </view>
</template>

<script setup lang="ts">
import { EnumStatus } from "@/utils/constants";
interface IProps {
    content:any
}
const props = withDefaults(defineProps<IProps>(), {})
const names = computed(()=>{
    return props.content[3][0].slice(0,2)
})
const fs = computed(()=>{
    return props.content[3][1].slice(0,2)
})

const infos = computed(()=>{
    return props.content[3][2].slice(0,3)
})
const pf = computed(()=>{
    return props.content[3][3].slice(0,3)
})
const emit = defineEmits(['update:defStatus'])
const reCommit =()=>{
emit('update:defStatus',EnumStatus.STATUS)
}
const splitItem = (str:string)=>{
    return str.split("")
}
const cv = ()=>{
    uni.setClipboardData({
	data: props.content,
	success: function () {
		uni.showToast({
            title:"复制成功"
        })
	}
});
}

</script>

<style lang="scss" scoped>
    .info-body{
        font-size: 32rpx;
        height: 10%;
        width: 70%;
        z-index: 102;
        position: absolute;
        top: 44%;
        left: 15%;
        color: white;
        text{
                color: $uni-color-warning;
                margin-left: 20rpx;
        }
        .name-body{
            display: flex;
            .sex{
                margin-top: 20rpx;
            }
            .name{
                font-weight: bold;
                color: white;
                font-size: 80rpx;
                text-align: center;
                line-height: 100rpx;
                width: 100rpx;
                height: 100rpx;
                margin-left: 40%;
                background-size: 100% 100%;
                margin-bottom: 20rpx;
                background-image: url('http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520175693944577.png');
            }
        }
    }
    .info-content{
        height: 40%;
        width: 70%;
        z-index: 102;
        position: absolute;
        top: 60%;
        left: 15%;
        .recommend{
            color: white;
            .name-moral{
                font-size: 32rpx;
                margin-top: 15rpx;
                margin-bottom: 28rpx;
                overflow: hidden;
                white-space: nowrap; /* 不换行 */
                text-overflow: ellipsis; /* 文本溢出时显示省略号 */
                text{
                    color: $uni-color-warning;
                }
            }
            .name-fraction{
                display: flex;
                view{
                    height: 80rpx;
                    width: 80rpx;
                    font-size: 60rpx;
                    text-align: center;
                    line-height: 80rpx;

                }
                .name-text{
                    background-image: url('http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520175693944577.png');
                    background-size: 100% 100%;
                    margin-right: 15rpx;
                }
                .fraction{
                    color: $uni-color-warning;
                    display: flex;
                    margin-left: 25%;
                    text{
                        font-size: 25rpx;
                        margin-left: 10rpx;
                        line-height: 100rpx;
                        color: white;
                    }
                }
            }
        }
    }
    .recommend-info{
        font-size: 32rpx;
        color: white;
        margin-bottom: 18rpx;
        text{
            color: $uni-color-warning;
        }
    }
    .moral{
        height: 150rpx;
        background-image: url("http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520175685337012.png");
        background-size: 100% 100%;
        padding: 20rpx;
        font-size: 25rpx;
        overflow: hidden;
        text-overflow: ellipsis; /* 文本溢出时显示省略号 */
    }
    .commit{
      z-index: 102;
      position: absolute;
      top: 130%;
      width: 40%;
      height: 100rpx;
      background-size: 100% 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      color: white;
    }
    .age{
        left: 7%;
        background-image: url('http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520175729400819.png');
    }
    .copy{
        left: 53%;
        background-image: url("http://img-miniprogram-o.doutuimao.net/rtsvip/common/2022/08/15/2022081520175748741252.png");
    }


</style>
